<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width:400px;height:200px;background-color:orange;" id="box" class="test" username="张三">我是div</div>
    <p id="666" data-id="1" data-name="张三" data-user-age="19" 你叫啥名字="我叫张三" qfedu="yyds">zhangsan</p>
    <script>
        // 复习元素的属性

        // 写在标签身上 
        // 属性名="属性的值"
        // 操作属性的时候  不要去利用操作属性的方式操作样式和类名  

        // 有专门操作 样式  和专门操作类名方法 
        
        // 属性的分类 
            // 1.原生属性 w3c标准存在的属性  id class style type name 
            //  checked    
            //  disabled
            //  selected

            //  上面三个属性 我们获取的是结果是布尔值 
            //  也可以直接设置布尔值  进行操作 
            
            
            // 2.自定义属性  w3c标准没有的属性
                    // 对标签没有意义但是方便程序员 写下来记录一些信息 
            // 3.h5 自定义属性 
            //  data-开头的属性
            // 目的也是为了区分 标签 



        // 原生属性的操作  
        //  读
        //    语法: 元素.属性名
        //    返回值: 属性名对应的值

        //  写
        //    语法:  元素.属性名 = 属性值
        //      把属性的值 进行修改 


        // 自定义属性的操作 
        // 可以操作原生属性 也可以操作h5自定义属性 

        // 语法 
        //  读
        //      元素.getAttribute(属性名);

        //  写
        //      元素.setAttribute(属性名,属性值);

        //  删除 
        //       元素.removeAttribute(属性名);


        // 注意事项 :
        //      不管设置的属性是什么数据类型 得到的一定是字符串 
        //      尽量不使用这种方式操作原生属性和h5自定义属性 
        //      因为它们都有各自的操作方式  



        // h5自定义属性的操作
        // data-  开头 
        // data-名字  属性名 
        //  =  右边   属性值 
        
        // 每个标签 天生自带一个属性  叫dataset  
        // dataset 是个对象 
        // 对象中保存着 所有 data-开头的属性名和属性值
        // 比如  data-id="1" data-name="张三" data-user-age="19"
        // {id:'1',name='张三',userAge:'19'} // data- 后边的如果有中划线 
        // 以小驼峰方式保存到  dataset中  





        // 操作原生属性 

        // 读 
        // var divele = document.querySelector('div');
        // console.log(divele.id);
        // console.log(divele.style);
        // console.log(divele.className); // class是关键字  操作原生属性的时候要用className
        // console.log(divele.username); // undefined
        // 不能读取非原生属性  

        // 写 
        // var divele = document.querySelector('div');
        // divele.style = `width:500px;height:1000px;background-color:pink;`
        // divele.username = 'kangbazi';
        // // 不用使用写原生属性的方式写  自定义属性 



        // 自定义属性的操作

        // var pele = document.getElementsByTagName('p')[0];
    //    console.log(pele.getAttribute('你叫啥名字')); 
    //    console.log(pele.getAttribute('qfedu'));
    //    下面两行 尽量不这么用
    //    console.log(pele.getAttribute('data-id'));
    //    console.log(pele.getAttribute('id'));


        // pele.setAttribute('haha','hehe')
         //    下面两行 尽量不这么用
        // pele.setAttribute('data-num','999');
        // pele.setAttribute('class','boxes')

        // pele.removeAttribute('你叫啥名字')
         //    下面两行 尽量不这么用
        // pele.removeAttribute('data-id');
        // pele.removeAttribute('id');



        var pele = document.getElementsByTagName('p')[0];
        // console.dir(pele);

        // console.log(pele.dataset); // dataset中包含所有data-开头的属性 
        // 获取  
        // console.log(pele.dataset.id);

        // 往标签身上增加 data-开头的属性 
        // pele.dataset.haha = 666
        // <p data-haha="666">
        
        // pele.dataset.hahaHehe = 666
        // <p data-haha-hehe="777">

        // 修改原来的h5自定义属性
        // pele.dataset.id = 888

        // 删除

        // delete pele.dataset.userAge
        

    </script>
</body>
</html>